<template>
  <el-dialog
      title="店铺状态变更"
      :visible.sync="formInfoObj.visible"
      width="30%">
       <el-descriptions :column="2" style="margin-bottom: 20px;">
        <el-descriptions-item label="店铺名称"><el-tag>{{formInfoObj.name}}</el-tag></el-descriptions-item>
        <el-descriptions-item label="当前状态"><el-tag>{{formInfoObj.status}}</el-tag></el-descriptions-item>
        </el-descriptions-item>
      </el-descriptions>
       <el-form :model="formInfoObj"
          ref="ruleFormsRef">
           <el-form-item label="变更状态">
            <el-select v-model="formInfoObj.operateType" style="width:100%" placeholder="请选择">
            <el-option
              v-for="item in shopStatusData"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
           <el-input
            type="textarea"
            placeholder="请输入内容"
            :autosize="{ minRows: 4, maxRows: 8}"
            v-model="formInfoObj.reason"
            maxlength="100"
            show-word-limit />
        </el-form-item>
        </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formInfoObj.visible = false">取 消</el-button>
        <el-button type="primary" @click="submitform">确 定</el-button>
      </span>
    </el-dialog>
</template>

<script>
import {
  Vue,
  ref,
  toRefs,
  shallowRef,
  reactive,
  watch,
  watchEffect,
  getCurrentInstance,
  computed,
  defineComponent,
  nextTick,
  inject,
  onMounted,
  onUnmounted
} from 'vue'
import { Message,MessageBox } from 'element-ui'
import store from '@/store'
import {setMerchantShopStatus} from '@/api/merchant/shop_api.js'
export default {
  name: 'shopUpdate',
  setup(props, { emit }) {
   // const emits = defineEmits(['onOk'])
    const Interface = reactive({
      openForm(row){
        query.formInfoObj.shopId = row.id
        const obj = query.shopStatusData.find(v=>v.value === row.status)
        if(Object.keys(obj).length > 0){
          query.formInfoObj.status = obj.label
        }
        query.formInfoObj.operateType = row.status
        query.formInfoObj.reason = ''
        query.formInfoObj.name = row.name
        query.formInfoObj.visible = true
      },
      async submitform(){
        const {code} = await setMerchantShopStatus(query.formInfoObj)
        if(code === 0){
          Message.success('操作成功')
          query.formInfoObj.visible = false
          emit('onOk')
        }
      }
    })
    const ruleFormsRef = ref(null)
    const query = reactive({
      shopStatusData: computed(() => store.getters['baseStore/shopStatusData'].filter(v=>v.value >=6)),
      formInfoObj:{
        name:'',
        status:'',
        operateType:'',
        reason:'',
        visible:false,
        shopId:''
      }
    })
    return {
      ruleFormsRef,
      ...toRefs(query),
      ...toRefs(Interface)
    }
  }
}
</script>
